<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: rgb(67, 71, 74);
    }

    .global-loading-body {
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* font-size: 100px; */
    }

    .loader {
      color: #1a88ff;
      font-size: 18px;
      margin: 50px auto;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      position: relative;
      animation: load4 1.4s infinite linear;
      transform: translateZ(0);
    }

    @keyframes load4 {

      0%,
      100% {
        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
          -3em 0 0 -1em, -2em -2em 0 0;
      }

      12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
          -3em 0 0 -1em, -2em -2em 0 -1em;
      }

      25% {
        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
          -3em 0 0 -1em, -2em -2em 0 -1em;
      }

      37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
          -3em 0em 0 -1em, -2em -2em 0 -1em;
      }

      50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
          -3em 0em 0 -1em, -2em -2em 0 -1em;
      }

      62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
          -3em 0 0 0, -2em -2em 0 -1em;
      }

      75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
          -3em 0em 0 0.2em, -2em -2em 0 0;
      }

      87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
          -3em 0em 0 0, -2em -2em 0 0.2em;
      }
    }
  </style>

  <div class="global-loading-body">
    <div class="loader"></div>
  </div>
</body>

</html>